<template>
	<view class="work_page">
		<view class="us_tiem">
			<view class="lbe">
				学生姓名：
			</view>
			<view class="vale">{{userInfo.nickname}}</view>
		</view>
		<view class="us_tiem">
			<view class="lbe">
				所属班级：
			</view>
			<view class="vale">{{userInfo.cource_team_name}}</view>
		</view>
	<!-- 	<view class="us_tiem">
			<view class="lbe">
				年级：
			</view>
			<view class="vale">{{userInfo.nickname}}</view>
		</view> -->
		<view class="us_tiem" style="align-items: flex-start;">
			<view class="lbe">
				作品图片：
			</view>
			<view class="upload_view" >
				<view class="u_img" v-for="(item,index) in vimages" :key="index" >
					<image :src="item" mode="" @click="preview(index)" mode="center"></image>
					<view class="icons" @click.stop="Clone(index)"><u-icon name="close" color="#fff" size="22"></u-icon></view>
				</view>
				<view v-if="vimages.length < 9" class="uplo_img" @click="chooseAndUploadImage">
					<view class="tops">
						<image src="../../static/j.png"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="btn" @click="CourSubmit">
			提交
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from 'vuex';
	import { cour_submit } from '@/core/api/index.js'
import { ssrContextKey } from "vue";
	export default{
		computed:{
			...mapState({
				userInfo: state => state.user.userInfo
			}),
		},
		data(){
			return{
				vimages:[],
				id:''
			}
		},
		onLoad(r) {
			console.log(r)
			this.id = r.id
		},
		methods:{
			//删除图片
				Clone(index){
					console.log(this.parmes , index)
					this.vimages.splice(index,1)
				},
				//预览图片
				preview(index){
					// 	// 预览图片
					// 	console.log(this.parmes.images)
						uni.previewImage({
							urls: this.vimages,
							current:index,
							longPressActions: {
								itemList: ['发送给朋友', '保存图片', '收藏'],
								success: function(data) {
									console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
								},
								fail: function(err) {
									console.log(err.errMsg);
								}
							}
						});
						return
				},
				// 上传图片
				chooseAndUploadImage() {
					// 选择图片
					uni.chooseImage({
						count: 9, // 默认9，设置图片的数量
						sizeType: ['original', 'compressed'], 
						sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
						success: (chooseImageRes) => {
							const tempFilePaths = chooseImageRes.tempFilePaths;
							// 多张图片上传
							tempFilePaths.forEach((resimg, index) => {
								uni.uploadFile({
									url: this.$imgurl + '/index.php/api/ajax/upload', // 服务器上传接口地址
									filePath: resimg,
									name: "file",
									header:{
										'Ba-User-Token' : uni.getStorageSync('_access_token')
									},
									success: (uploadFileRes) => {
										console.log(resimg, '这次传的数据,‘----’', index)
										console.log('upload success:', uploadFileRes);
										let uplodata = JSON.parse(uploadFileRes.data)
										this.vimages.push(this.$imgurl + uplodata.data.file.url)
										// console.log(this.form.simags,'图片')
									},
									fail: (uploadFileErr) => {
										// console.error('upload fail:', uploadFileErr);
									}
								});
							})
							// const uploadTask =
							// 监听上传进度变化
							// uploadTask.onProgressUpdate((res) => {
							// 	console.log('上传进度' + res.progress + '%');
							// });
						},
						fail: (chooseImageErr) => {
							console.error('choose image fail:', chooseImageErr);
						}
					});
			},
			async CourSubmit(){
				// if(this.)
				uni.showLoading({
					title:"提交中..."
				})
			   const data = await cour_submit({cource_level_id :this.id,images:this.vimages})	
			   if(data.code == 1) {
				   uni.showToast({
				   	title:data.msg
				   })
				   setTimeout(()=>{
					  uni.navigateTo({
					  	url:'/pages/barrier/homework_datalis?id=' + this.id
					  })
				   },1000)
			   }
			}
		}
	}
</script>
<style>
	page{
		background: rgba(247, 247, 247, 1);
	}
</style>
<style lang="scss" scoped>
	.work_page{
		width: 93%;
		height: 96vh;
		margin: 30rpx auto;
		padding: 45rpx 0rpx 45rpx 40rpx;
		border-radius: 23.24rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 6rpx 12rpx  rgba(0, 0, 0, 0.1);
		.us_tiem{
			font-size: 28rpx;
			display: flex;
			align-items: baseline;
			margin-bottom: 50rpx;
			.lbe{
				color:rgba(102, 102, 102, 1);
				width:150rpx;
				text-align: right;
			}
			.vale{
				font-size: 26rpx;
				margin-left: 30rpx;
			}
		}
		.btn{
			width: 396rpx;
			height: 66rpx;
			opacity: 1;
			border-radius: 312rpx;
			background: linear-gradient(180deg, rgba(4, 190, 254, 1) 0%, rgba(68, 129, 235, 1) 100%);
			font-size: 28rpx;
			color: #fff;
			text-align: center;
			margin: 10rpx auto;
			line-height: 64rpx;
			text-align: center;
		}
		.upload_view {
			// width: 205rpx;
			// height: 205rpx;
		    display: flex;
			// margin-top: 12rpx;
			flex: 1;
			flex-wrap: wrap;
		    .u_img{
				// width: 100%;
				// height: 100%;
				position: relative;
				image{
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					// width: 205rpx;
					border: 1rpx solid #E3E3E3;
					width: 150rpx;
					height: 150rpx;	
					margin-right: 10rpx;
					margin-bottom: 10rpx;
				}
				.icons{
					position: absolute;
					z-index: 1;
					top: -5%;
					width: 42rpx;
					height: 42rpx;
					background: #9c9a9a;
					display: flex;
					align-items: center;
					border-radius: 50%;
					justify-content: center;
					right: 2%;
				}
			}
			.uplo_img{
			    background: #F5F5F5;
			    width: 150rpx;
			    height: 150rpx;	
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				display: flex;
				align-items: center;
				flex-direction: column;
				font-size: 22rpx;
				color: #8D8D8D;
				justify-content: center;
			}
			.tops {
				display: flex;
				align-items: center;
				margin-bottom: 5rpx;
				image {
					width: 53rpx;
					margin-right: 9rpx;
					height: 53rpx;
				}
			}
		}
	}
</style>